<template>
    <div class="content">
        <div id="cesiumContainer"></div>
        <navbar :transPosition="transPosition"></navbar>
        <!-- <div class="floor">
            <div id="sand">
                <img
                    id="chageSand"
                    :src="
                        sandflag == true
                            ? require('@/static/images/sand_btn1.png')
                            : require('@/static/images/sand_btn2.png')
                    "
                />
            </div>
            <input type="checkbox" id="startNight" class="check" />
        </div> -->
    </div>
</template>

<script>
import navbar from '@/components/school/SchoolNav'
import $ from 'jquery'
export default {
    name: 'School',
    data() {
        return {
            layer: [],
            sandflag: true,
            transPosition: [],
            sandImg: '@/static/images/sand_btn2.png',
        }
    },
    components: {
        navbar,
    },
    methods: {
        // chageSand() {
        //     this.sandflag = !this.sandflag
        //     var check = document.querySelector('#startNight')
        //     check.checked = !check.checked
        //     console.log(check)
        // },
    },
    mounted() {
        var _that = this
        var viewer = new Cesium.Viewer('cesiumContainer', {
            animation: false,
            baseLayerPicker: false,
            geocoder: false,
            homeButton: false,
            sceneModePicker: false,
            timeline: false,
            navigationHelpButton: false,
            fullscreenButton: false,
            infoBox: false,
            selectionIndicator: false,
            zoomIndicatorContainer: false,
            navigation: false,
        })
        var labelImagery = new Cesium.UrlTemplateImageryProvider({
            url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
            minimumLevel: 3,
            maximumLevel: 18,
        })
        viewer.imageryLayers.addImageryProvider(labelImagery)
        window.viewer = viewer
        var scene = viewer.scene
        scene.globe.show = true
        scene.sun.show = true
        viewer.scene.bloomEffect.show = false
        viewer.scene.hdrEnabled = false
        viewer._cesiumWidget._creditContainer.style.display = 'none'
        viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
        // viewer.scene.screenSpaceCameraController.minimumZoomDistance = 50 //相机的高度的最小值
        // viewer.scene.screenSpaceCameraController.maximumZoomDistance = 200 //相机高度的最大值
        //打开所发布三维服务下的所有图层
        // scene.lightSource.ambientLightColor = new Cesium.Color(0.15, 0.15, 0.15, 1)
        // scene.lightSource.ambientLightColor = new Cesium.Color(0,1, 1, 0.9)
        var promise = viewer.scene.open(window._CONFIG['QZXY'])
        Cesium.when.all(promise, (layers) => {
            // scene.camera.setView({
            //     destination: new Cesium.Cartesian3.fromDegrees(109.48745494019622, 18.269371823490587, 80),
            //     orientation: {
            //         heading: Cesium.Math.toRadians(30), // 方向
            //         pitch: Cesium.Math.toRadians(-25.0), // 倾斜角度
            //         roll: 0,
            //     },
            // })
            var listlayers = layers
            // var imageLayer
            console.log(listlayers);
            listlayers[0].visible=false
            listlayers[4].visible=false


            // var chageSand = document.querySelector('#chageSand')
            // chageSand.addEventListener('click', function () {
            //     _that.sandflag = !_that.sandflag
            //     var check = document.querySelector('#startNight')
            //     check.checked = !check.checked
            //     if (!check.checked) {
            //         console.log(11)
            //         listlayers[1].style3D.fillForeColor = new Cesium.Color(1, 1, 1, 1)
            //         listlayers[0].style3D.fillForeColor = new Cesium.Color(1, 1, 1, 1)
            //         // 刷新场景
            //         listlayers[0].refresh()
            //         listlayers[1].refresh()
            //         viewer.scene.hdrEnabled = false
            //         viewer.scene.bloomEffect.show = false
            //         viewer.scene.skyAtmosphere.show = true
            //         viewer.imageryLayers.remove(imageLayer)
            //         return
            //     }
            //     viewer.scene.fxaa = true
            //     viewer.scene.bloomEffect.show = true
            //     viewer.scene.bloomEffect._bloomColor = Cesium.Color.WHITE
            //     viewer.scene.bloomEffect.bloomIntensity = 6
            //     viewer.scene.bloomEffect.threshold = 0.01
            //     scene.hdrEnabled = true
            //     viewer.scene.skyAtmosphere.show = false
            //     imageLayer = viewer.imageryLayers.addImageryProvider(
            //         new Cesium.SingleTileImageryProvider({
            //             url: '/haiyuan/static/img/heise.png',
            //         })
            //     )
            //     // var style3D = new Cesium.Style3D()
            //     listlayers[1].style3D.fillForeColor = new Cesium.Color(135 / 255, 206 / 255, 1, 0.2)
            //     listlayers[0].style3D.fillForeColor = new Cesium.Color(0.2, 0.2, 0.2, 1)
            //     listlayers[0].refresh()
            //     listlayers[1].refresh()
            // })
            

            window.layers = layers
            listlayers.forEach((res, i) => {
                res.selectedColor = ''
            })
            //    window.setInterval(() => {
            //   setTimeout(listlayers[1].style3D.fillForeColor = new Cesium.Color(1.0, 1.0, 1.0, Math.ceil(Math.random() * 256 - 1) / 255), 0)
            // }, 10)
        })
        //鼠标单击事件
        var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas)
        handler.setInputAction(function (e) {
            //获取点击位置笛卡尔坐标
            var position = scene.pickPosition(e.position)
            let selectlayer = viewer.scene.layers.getSelectedLayer()
            console.log(selectlayer)
            //将笛卡尔坐标转化为经纬度坐标------打印经纬度--后期不用可删除。
            var cartographic = Cesium.Cartographic.fromCartesian(position)
            var longitude = Cesium.Math.toDegrees(cartographic.longitude)
            var latitude = Cesium.Math.toDegrees(cartographic.latitude)
            var height = cartographic.height
            if (height < 0) {
                height = 0
            }
            console.log(longitude + ',' + latitude + ',' + height)
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
        var _this = this
        viewer.scene.camera.changed.addEventListener(function () {
            var position = viewer.camera.position
            var arr = []
            var cartographic = Cesium.Cartographic.fromCartesian(position)
            arr.push(Cesium.Math.toDegrees(cartographic.longitude))
            arr.push(Cesium.Math.toDegrees(cartographic.latitude))
            arr.push(viewer.camera.heading)
            _this.transPosition = arr
            console.log(_this.transPosition);
        })
    },
}
</script>

<style lang="less" scoped>
@import '../../assets/css/initialization.css';
.content {
    #cesiumContainer {
        width: 100%;
        height: 100%;
        position: fixed;
    }
    .floor {
        width: 65px;
        height: 65px;
        position: fixed;
        top: 65%;
        left: 400px;
        transform: translateY(-50%);
        border-radius: 6px;
        background: rgba(55, 79, 126, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        div {
            width: 65px;
            height: 65px;
            padding: 10px;
            border-radius: 6px;
            position: relative;
            cursor: pointer;
            &::after {
                content: '沙盒/水晶体';
                width: 80px;
                color: #fff;
                font-size: 14px;
                font-weight: 600;
                position: absolute;
                top: 50%;
                left: 40px;
                transform: translate(-50%, -50%);
                opacity: 0;
                transition: all 0.5s;
            }

            img {
                width: 100%;
                height: 100%;
            }
        }
        div:hover::after {
            opacity: 1;
            left: 110px;
        }
        .check {
            position: absolute;
            top: 50%;
            left: -999em;
            transform: translate(-50%, -50%);
            opacity: 0;
            cursor: pointer;
        }
    }
}
</style>